<template>
	<view class="container">
		<view class="h2">
		</view>
		<u-sticky offset-top="0">
			<view class="Search">
				<u-search :show-action="true" actionText="搜索" :animation="true" v-model="searchText"
					@search="getsearch" />
			</view>
		</u-sticky>
		<view class="search-tabbar">
			<u-tabs :list="list1" sticky @change='change' :current='current'></u-tabs>
			<view class="one" >
				<view class="ul">
					<view class="li" v-for="(item, i) in list.data.list" @click="shopdetails(item.id)">
						<view class="img"><image :src="item.picUrl"></image></view>
						<view class="font">
							<view class="title">{{ item.name }}</view>
							<view class="price">{{ item.retailPrice }}</view>
						</view>
					</view>
				</view>
			</view>			
		</view>
		<view class="waterfall">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				list1: [{
					name: '综合',
				}, {
					name: '升序',
				}, {
					name: '降序'
				},{
					name: '分类'
				}],
				list:[],
				current: 0,
				text:'',
				searchtext:''
			}
		},
		onLoad(option) {
			console.log(option)
				this.$get(this.API.list,{keyword:'',categoryId:option.id,sort:"retail_price",order:'asc'}).then((res) => {
					this.list=res.data
				})
		},
		computed:{
			getddd(){
				return this.$store.state.strong
			}
		},
		methods: {
			getsearch(e) {//输入框
				this.searchtext=e	
				this.$get(this.API.list,{keyword:e}).then((res) => {
					this.list=res.data
					console.log(this.list)
				})
			},
			getcurr(e){
				let text=''
				if(e==1){
					return text= 'asc' 
				}
				if(e==2){
					return text= 'desc'
				}
				else{
					return text= ''
				}
				return text
			},
			shopdetails(e) {
				uni.navigateTo({
					url: '../../pages/shopdetails/shopdetails?id=' + e
				});
			},
			change(e) { //选择框
				this.current = e.index
				this.$get(this.API.list,{keyword:this.searchtext,order:this.getcurr(e.index),sort:"retail_price"}).then((res) => {
					this.list=res.data
					console.log(this.list)
				})
			}
		},

		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	
	.container {
		.search-tabbar{
			.ul {
				&::after,
				&::before {
					display: table;
					content: '';
					clear: both;
				}
				.li {
					background-color: $uni-bg-color;
					width: 48%;
					float: left;
					margin-left: 1%;
					margin-bottom: 1%;
					.other-title {
						text-align: center;
						line-height: 10vh;
					}
					.img {
						image {
							width: 50vw;
							height: 30vh;
						}
					}
					.font {
						text-align: center;
						text-overflow: ellipsis;
						.title {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
				
		}
		
	}
</style>
